import React, { useState, useEffect } from 'react'
import { Table, Button, Modal, Tree, message } from 'antd'
import { DeleteOutlined, BarsOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import { roleList, delRole, getMenuList, setRoleRights } from '@api'

export default function RoleList() {
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '角色名称',
      dataIndex: 'roleName'
    },
    {
      title: "操作",
      render: (item) => {
        return <div>
          <Button type="primary" shape="circle" icon={<BarsOutlined />} onClick={() => { showModal(item) }} />
          <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => { delThisRole(item) }} />
        </div>
      }
    }
  ]
  // 列表内容
  const [dataSource, setdataSource] = useState([])
  // 操作弹出框
  const [isModalVisible, setIsModalVisible] = useState(false)
  // 树形菜单列表
  const [rightList, setRightList] = useState([])
  // 树形选中的列表
  const [currentRights, setcurrentRights] = useState([])
  // 获取当前打开的角色id
  const [currentId, setcurrentId] = useState(0)
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  useEffect(() => {
    get_role_list()
    get_right_list()
  }, [])
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  // 获取角色列表
  const get_role_list = () => {
    roleList().then((res) => {
      setdataSource(res.data)
    })
  }
  // 删除
  const delThisRole = (item) => {
    Modal.confirm({
      title: '确认删除这个吗',
      icon: <ExclamationCircleOutlined style={{ color: 'red' }} />,
      content: '注意：该操作无法撤回',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        delRole(item.id).then(() => {
          message.success({
            content: '删除成功 ',
          });
          setdataSource(dataSource.filter(data => data.id !== item.id))
        })
      }
    })
  }
  // 显示弹出框
  const showModal = (item) => {
    // 显示弹出框
    setIsModalVisible(true)
    // 当前角色拥有的权限勾选
    setcurrentRights(item.rights)
    // 当前角色id
    setcurrentId(item.id)
  };
  // 弹出框点确认
  const handleOk = () => {
    setRoleRights({
      id: currentId,
      rights:  currentRights
    }).then(() => {
      message.success({
        content: '保存成功 ',
      })
      get_role_list()
      setIsModalVisible(false)
    })
  };
  // 弹出框点取消/X
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  // 获取树形菜单的列表
  const get_right_list = () => {
    getMenuList({
      _embed: 'children'
    }).then((res) => {
      setRightList(res.data)
    })
  }
  // 改变选中
  const onCheck = (checkKeys) => {
    setcurrentRights(checkKeys.checked)
  }
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} />
      <Modal title="设置可访问权限" okText="确定" cancelText="取消" visible={isModalVisible} onOk={() => handleOk()} onCancel={() => handleCancel()}>
        <Tree checkable checkedKeys={currentRights} checkStrictly={true} treeData={rightList} onCheck={onCheck} />
      </Modal>
    </div>
  )
}
